<template>
  <div style="width: 380px; margin: 0 0 20px 0; display: flex">
    <a-input-search v-model:value="search" placeholder="请输入应用名称" enter-button @search="onSearch" />
    <a-button style="margin: 0 10px" type="primary" :loading="iconLoading" @click="enterIconLoading">
      刷新本页
    </a-button>
  </div>
  <Table :columns="columns" :tabledata="tabledata" :loading="loading" :pagination="pagination" typeEnum='apkModel' @onClickPagination="onClickPagination" @onClickupdate='onClickupdate' @onClickDelete='onClickDelete' />

</template>
<script lang='ts'>
import { TableData, TableForEach, TypeEnum } from "@/CommonAssets/index";
import Table from "@/components/Table/Table.vue";
import columns from "./method/TableConfig";
import { reactive, Ref, ref, toRefs } from "vue";
import { $message } from "@/components/AntDesign/message";
import { AxiosResponse } from "axios";
import { schapk } from "@/api/apkApi";

export default {
  components: {
    Table,
  },
  setup() {
    /* 页面交互数据 */
    const data = reactive({
      loading: false,
      tabledata: [],
      pagination: {
        total: 0,
        pageSize: 6,
        hideOnSinglePage: true,
        current: 1,
      },
    } as any);

    async function tabledata(pageNo = 1) {
      data.loading = true;
      const { tabledata, total } = await TableData(TypeEnum.apkModel, pageNo);
      data.loading = false;
      data.tabledata = tabledata;
      data.pagination.total = total;
    }
    tabledata();

    /* 分页事件 */
    const onClickPagination = async (current: number) => {
      data.pagination.current = current;
      tabledata(current);
    };

    /* 刷新页面 */
    const iconLoading = ref<boolean>(false);
    function enterIconLoading() {
      iconLoading.value = true;
      onClickPagination(data.pagination.current);
      //$message("success", "刷新成功");
      iconLoading.value = false;
    }

    /* 搜索事件 */
    const search: Ref<string> = ref("");
    async function onSearch() {
      try {
        if (search.value) {
          const searchdata: AxiosResponse = await schapk({
            remarks: search.value,
          });
          search.value = "";
          data.tabledata = TableForEach(searchdata.data);
        }
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 更新数据 */
    interface updateData {
      index: number;
      accountPool?: string;
      merge?: string | null;
      mergeType?: string | null;
      codestatus?: boolean;
    }

    function onClickupdate(e: updateData) {
      if (e.accountPool) {
        data.tabledata[e.index].accountPool = e.accountPool;
      }

      if (e.merge && e.mergeType) {
        data.tabledata[e.index].mergeType = e.mergeType;
        data.tabledata[e.index].merge = e.merge;
      } else {
        data.tabledata[e.index].mergeType = null;
        data.tabledata[e.index].merge = null;
      }

      if (e.codestatus) {
        data.tabledata[e.index].codestatus = true;
      } else {
        data.tabledata[e.index].codestatus = false;
      }
    }

    /* 删除应用 */
    function onClickDelete(index: number) {
      // data.tabledata.splice(index, 1);
      enterIconLoading();
    }

    return {
      ...toRefs(data),
      onClickPagination,
      onClickDelete,
      onClickupdate,
      enterIconLoading,
      iconLoading,
      columns,
      oncancel,
      onSearch,
      search,
    };
  },
};
</script>
